<script setup>
import { defineProps } from "vue";
import router from "@/router/index.js";
import { IconUser } from "@arco-design/web-vue/es/icon";
import { Avatar as AAvatar } from "@arco-design/web-vue";

const props = defineProps({
  avatar: {
    type: String,
    default: ""
  },
  nickname: {
    type: String,
    default: "无"
  },
  userId: {
    type: String,
    default: ""
  }
});

const handleClick = () => {
  if (props.userId) {
    router.push(`/user/${props.userId}`);
  }
};
</script>

<template>
  <div class="user" @click="handleClick">
    <AAvatar v-if="props.avatar" :image-url="props.avatar" style="margin-right: 8px;" />
    <AAvatar v-else :style="{ backgroundColor: '#33c9ff' }" style="margin-right: 8px;">
      <IconUser />
    </AAvatar>
    <p style="display: inline-block; vertical-align: middle;">{{ props.nickname }}</p>
  </div>
</template>

<style scoped>
.user {
  display: flex;
  width: 260px;
  align-items: center;
  margin: 10px 0;
  cursor: pointer;
}
</style>
